import React from 'react';
import './App.css';
import TabBar from 'antd-mobile/lib/tab-bar';
import 'antd-mobile/lib/tab-bar/style/css'
import HomeIndex from './pages/home/index'
import CartIndex from './pages/home/cart'
import MyIndex from './pages/home/my'
import {connect} from "react-redux";
import cart from '../src/assets/css/home/cart.module.css'

class App extends React.Component{
    constructor(){
        super();
        this.state={
            hidden:false,
            selectedTab:'oneTab',
            tabList:[
                {
                    title:'首页',
                    key:'首页',
                    icon:'images/common/home1.png',
                    selectedIcon:'images/common/home2.png',
                    selectText: 'oneTab',
                    dataSeed:'logId',
                    tabComponent:<HomeIndex></HomeIndex>
                },
                {
                    title:'购物',
                    key:'购物',
                    icon:'images/common/cart1.png',
                    selectedIcon:'images/common/cart2.png',
                    selectText: 'twoTab',
                    dataSeed:'logId',
                    tabComponent:<CartIndex></CartIndex>
                },
                {
                    title:'我的',
                    key:'我的',
                    icon:'images/common/my1.png',
                    selectedIcon:'images/common/my2.png',
                    selectText: 'threeTab',
                    dataSeed:'logId',
                    tabComponent:<MyIndex></MyIndex>
                }
            ]
        }
    }
    componentWillMount() {
        if (localStorage.path){
            this.setState({selectedTab:localStorage.path})
        } else {
            this.setState({selectedTab:"oneTab"})
        }
    }

    render() {
        let isShow=this.props.state.userInfo.amount;
        return(
            <div>
                <TabBar unselectedTintColor="#949494" tintColor="red" barTintColor="white" hidden={this.state.hidden}>
                    {
                        this.state.tabList.map((item,index)=>{
                            return(
                                <TabBar.Item title={item.title} key={item.key}
                                    icon={<div style={{width:'30px',height:'30px',background:'url('+item.icon+') center center / 29px 29px no-repeat'}}/>}
                                    selectedIcon={<div style={{width:'30px',height:'30px',background:'url('+item.selectedIcon+') center center / 29px 29px no-repeat'}}/>}
                                    selected={this.state.selectedTab === item.selectText}
                                    onPress={()=>{
                                    this.setState({
                                        selectedTab:item.selectText
                                    },()=>{
                                        localStorage['path'] = this.state.selectedTab
                                    });
                                }} data-seed={item.dataSeed}>
                                    {item.tabComponent}
                                </TabBar.Item>
                            )
                        })
                    }
                </TabBar>
                <span className={cart.connect} style={{display:isShow?"block":"none"}}></span>
            </div>
        )
    }
}

export default connect((state)=>{
    return{
        state:state
    }
})(App)
